<template>
    <v-card class="menus-container">
        <v-card-title>目录</v-card-title>
        <v-card-text>
            <v-list rounded>
                <v-list-item-group v-model="initIndex" color="primary">
                    <v-list-item v-for="(menu, index) in menus" :key="index" @click="$vuetify.goTo(`#tool${menu.position}`, options)">
                        <v-list-item-content>
                            <v-list-item-title v-html="menu.toolName"></v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </v-card-text>
    </v-card>
</template>

<script>
    export default {
        name: 'SideMenu',
        props: {
            menus: Array
        },
        data: () => ({
            initIndex: 0,
            options: {
                duration: 0,
                offset: 12,
                easing: 'linear',
            }
        }),
        computed: {
            target () {
                const value = this[this.type];
                if (!isNaN(value)) return Number(value);
                else return value
            },
        }
    }
</script>

<style scoped>
    .menus-container{
        position: fixed;
        top: 100px;
    }
</style>
